<template>
  <div id="moreDetail" class="mytable">
    <el-dialog title="人员信息详情" :visible.sync="personDetailVisible" width="80%" top="20px" append-to-body :close-on-click-modal="false" :close-on-press-escape="false">
      <personInfo v-bind:personId='personId'></personInfo>
    </el-dialog>
    <el-scrollbar style="height: calc(100% + 17px);">
        <table cellspacing="0" cellpadding="0" class="bztable" v-if="deptMoreeditForm.unitPersonInfo">
          <tr><th width="100"></th><th>批准</th><th>实有</th><th>超缺情况</th><th>人员列表</th></tr>
          <tr></tr>
          <tr>
            <th>正职</th>
            <td>{{deptMoreeditForm.unitPersonInfo.zhengzhi.pizhunshu}}</td>
            <td>{{deptMoreeditForm.unitPersonInfo.zhengzhi.shijishu}}</td>
            <td>{{deptMoreeditForm.unitPersonInfo.zhengzhi.puanduan}}</td>
            <td v-show="deptMoreeditForm.unitPersonInfo.zhengzhi.personids&&deptMoreeditForm.unitPersonInfo.zhengzhi.personids.length>0">
              <div v-for="(item, index) in deptMoreeditForm.unitPersonInfo.zhengzhi.personnames" :key="index" keys>
                <el-button size="small" @click="persondetail(deptMoreeditForm.unitPersonInfo.zhengzhi.personids[index])" type="text" icon="el-icon-search" style="float:left;padding-right:20px;"><span style="color:#0058AC;font-weight:bolder">{{item}}</span></el-button>
              </div>
            </td>
            <td v-show="deptMoreeditForm.unitPersonInfo.zhengzhi.personids&&deptMoreeditForm.unitPersonInfo.zhengzhi.personids.length===0">
              <span v-for="(item, index) in deptMoreeditForm.unitPersonInfo.zhengzhi.personnames" :key="index" keys>
                <i class="el-icon-user-solid"></i>{{item}}
              </span>
            </td>
          </tr>
          <tr>
            <th>副职</th>
            <td>{{deptMoreeditForm.unitPersonInfo.fuzhi.pizhunshu}}</td>
            <td>{{deptMoreeditForm.unitPersonInfo.fuzhi.shijishu}}</td>
            <td>{{deptMoreeditForm.unitPersonInfo.fuzhi.puanduan}}</td>
            <td v-show="deptMoreeditForm.unitPersonInfo.fuzhi.personids&&deptMoreeditForm.unitPersonInfo.fuzhi.personids.length>0">
              <div v-for="(item, index) in deptMoreeditForm.unitPersonInfo.fuzhi.personnames" :key="index" keys>
                <el-button size="small" @click="persondetail(deptMoreeditForm.unitPersonInfo.fuzhi.personids[index])" type="text" icon="el-icon-search" style="float:left;padding-right:20px;"><span style="color:#0058AC;font-weight:bolder">{{item}}</span></el-button>
              </div>
            </td>
            <td v-show="deptMoreeditForm.unitPersonInfo.fuzhi.personids&&deptMoreeditForm.unitPersonInfo.fuzhi.personids.length===0">
              <span v-for="(item, index) in deptMoreeditForm.unitPersonInfo.fuzhi.personnames" :key="index" keys>
                <i class="el-icon-user-solid"></i>{{item}}
              </span>
            </td>
          </tr>
          <tr>
            <th>其他人员</th>
            <td>{{deptMoreeditForm.unitPersonInfo.yibanrenyuan.pizhunshu}}</td>
            <td>{{deptMoreeditForm.unitPersonInfo.yibanrenyuan.shijishu}}</td>
            <td>{{deptMoreeditForm.unitPersonInfo.yibanrenyuan.puanduan}}</td>
            <td v-show="deptMoreeditForm.unitPersonInfo.yibanrenyuan.personids&&deptMoreeditForm.unitPersonInfo.yibanrenyuan.personids.length>0">
              <div v-for="(item, index) in deptMoreeditForm.unitPersonInfo.yibanrenyuan.personnames" :key="index" keys>
                <el-button size="small" @click="persondetail(deptMoreeditForm.unitPersonInfo.yibanrenyuan.personids[index])" type="text" icon="el-icon-search" style="float:left;padding-right:20px;"><span style="color:#0058AC;font-weight:bolder">{{item}}</span></el-button>
              </div>
            </td>
            <td v-show="deptMoreeditForm.unitPersonInfo.yibanrenyuan.personids&&deptMoreeditForm.unitPersonInfo.yibanrenyuan.personids.length===0">
              <span v-for="(item, index) in deptMoreeditForm.unitPersonInfo.yibanrenyuan.personnames" :key="index" keys>
                <i class="el-icon-user-solid"></i>{{item}}
              </span>
            </td>
          </tr>
        </table>
    </el-scrollbar>
  </div>
</template>

<script>
import personInfo from '@/person/Detail.vue'
export default {
  components: {
    personInfo
  },
  name: 'HelloWorld',
  props: {
    unitInfo: ''
  },
  watch: {
    unitInfo (val) {
      console.log('跟踪信息')
      console.log(val)
      this.deptMoreeditForm = val
    }
    // $refs.tree2.getCurrentNode()
  },
  data () {
    return {
      deptEditswitch: false,
      moreDetailLoading: false,
      deptMoreeditForm: {},
      deptMoreEditFormRules: {
      },
      editLoading: false,
      deptMoreEditFormLoading: false,
      hyoptions: [{
        value: '类别1',
        label: '类别1'
      }, {
        value: '类别2',
        label: '类别2'
      }],
      sydwoptions: [{
        value: '类型1',
        label: '类型1'
      }, {
        value: '类型2',
        label: '类型2'
      }],
      personDetailVisible: false,
      personId: ''
    }
  },
  methods: {
    persondetail (id) {
      this.personDetailVisible = true
      this.personId = id
    }
  },
  mounted () {
  }
}
</script>
<style >
#moreDetail{
  overflow: hidden;
}
.infotable{
  margin:0 20px 20px;
  font-size:14px;
  font-family: '宋体';
  border: 1px solid
}
.tableh th{
  width: 200px
}
.tableh td{
  text-align: left;
  padding-left:40px !important;
}
#moreDetail h2{
  font-size:var(--size16) !important;
  padding-left: 20px;
}
</style>
